<template>
  <div class="list">
    <div class="icon">
        <img :src="listArr.smallImg"  class="auto-img">
    </div>
    <div class="text">
      <div class="zn-name">
        {{ listArr.name }}
        <span class="en-name">({{ listArr.enname }})</span>
      </div>
      <div class="detail">
        {{ listArr.desc }}
      </div>
      <div class="price">￥27</div>
    </div>
    <div class="add">
      <img class="auto-img" src="../assets/images/add.png" @click="skip"/>
    </div>
  </div>
</template>
<script>
export default {
  name: "detailList",
  props: {
    listArr: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods:{
      skip(){
          let pid=this.listArr.pid
         this.$router.push({name: 'Detail', params: {pid}});
      }
  }
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
.list {
  height: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0px 20px;
  position: relative;
  .icon {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
    }
  }
  .text {
    flex: 1;
    margin-left: 30px;
    .zn-name {
      font-size: 15px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .detail {
      margin-top: 5px;
      font-size: 10px;
      color: #ada7a7;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      margin-top: 2px;
      font-size: 16px;
      color: @mainColor;
      font-weight: bold;
    }
  }
  .add {
    height: 23px;
    width: 23px;
    position: absolute;
    right: 10px;
    bottom: 6px;
    .auto-img {
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}
</style>
